<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<view class="dating-dynamic-container" v-if="dynamicList && dynamicList.length > 0">
			<view class="dating-dynamic-wrap" v-for="(item,index) in dynamicList"  :key="index">
				<view class="dating-dynamic-head">
					<view><image class="dating-img-radius-48" :src="item.memberInfo.avatar"></image></view>
					<view class="dating-dynamic-head-box">
						<view class="dating-dynamic-head-box-top">
							<view class="dating-dynamic-head-box-top-left">
								<view>{{item.memberInfo.nickname}}</view>
								<dating-sex :mode="2" :sex="item.memberInfo.sex" :age="item.memberInfo.age"></dating-sex>
							</view>
							<view class="dating-dynamic-head-box-top-right">
								   <dating-level :data="item.memberInfo.levelInfo"></dating-level>
							</view>
						</view>
						<view class="dating-dynamic-head-box-bottom" v-if="locale === 'zh-Hans'">
							<view class="iconfont iconfont-position"></view>
							<text class="text-color-three">{{item.memberInfo.provinceName}}</text>
						</view>
					</view>
				</view>
				<view class="dating-dynamic-body">
					<view>{{item.content}}</view>
					<view class="u-m-t-10">
						<image v-for="(item, index) in item.imgs" :src="item" mode="widthFix"></image>
					</view>
					<view class="u-m-t-10">
						<video style="width: 100%;" v-for="(item,index) in item.videos" :key="index" 
									class="Trailer"  :data-id="index"  :id="index+''" :src="item" 
									@play="playing">
						</video>
					</view>
				</view>
				<view class="dating-dynamic-date u-m-t-10 text-color-three">
					{{item.relativeDate}}
				</view>
				<view class="dating-dynamic-footer u-m-t-10">
					<view class="dating-dynamic-footer-top" @tap="onShowComment(item.id)">
						<view class="row-x" v-for="(item,index) in item.commentList" v-if="index<4" :key="index">
							<view class="sm-font-size">{{item.nickname}}：</view>
							<view class="sm-font-size text-color-three">{{item.content}}</view>
						</view>
					</view>
					<view class="dating-dynamic-footer-bottom">
						<view class="text-color-three u-m-t-10" @tap="onShowComment(item.id)">{{saysomethingText}}</view>
						<view class="dating-dynamic-footer-bottom-wrap">
							<view class="dating-dynamic-footer-bottom-action">
								<view class="iconfont iconfont-liked" v-if="item.hasLike"></view>
								<view class="iconfont iconfont-not_liked" v-else @tap="onLike(index,item.id)"></view>
								<view class="dating-dynamic-footer-bottom-action-num">{{item.likes?item.likes:0}}</view>
								<view class="iconfont iconfont-comment" @tap="onShowComment(item.id)"></view>
								<view class="dating-dynamic-footer-bottom-action-num">{{item.commentNum?item.commentNum:0}}</view>
								<view class="iconfont iconfont-more" @tap="onShowReport(item.id)"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<dating-report :show="showReport" :postId="postId"></dating-report>
		<dating-comment :show="showComment"  ref="datingComment" @close="close" @add="add" @del="del" @like="like" @focusOn="focusOn" :deleteTip="irreversibleText"
			:cmData="commentData" v-if="commentData"></dating-comment>
	</view>
</template>

<script>
	import {commentList,createComment,likeComment,deleteComment,postLike} from '@/common/http.api.js'
	import jwt from '@/utils/jwt.js';
	export default {
		name:"dating-dynamic",
		props: {
		  dynamicList:{
			  type:Array,
			  default:()=>[]
		  },
		},
		data() {
			return {
				locale:'',
				saysomethingText:'',
				operationText:'',
				hintText:'',
				loginfirstText:'',
				gotologinText:'',
				comenterrorText:'',
				irreversibleText:'',
				successfuloperationText:'',
				postId:0,
				showReport:false,
				showComment:false,
				commentData: null,
				reqFlag: false // 请求标志，防止重复操作，true表示请求中
			};
		},
		watch: {
			showComment: {
				handler: function(newVal, oldVal) {
					console.info('动态showComment：' + newVal)
				},
				immediate: true
			}
		},
		created(){
			this.refresh();
			this.locale = this.$i18n.locale;
		},
		methods:{
			refresh(){
				this.saysomethingText = this.$t('dynamic.saysomething.text');
				this.irreversibleText = this.$t('comment.irreversible.text')
				this.operationText = this.$t('dynamic.operation.text');
				this.hintText = this.$t('dynamic.hint.text');
				this.loginfirstText = this.$t('dynamic.loginfirst.text');
				this.gotologinText = this.$t('dynamic.gotologin.text');
				this.comenterrorText = this.$t('dynamic.comenterror.text');
				this.successfuloperationText = this.$t('dynamic.successfuloperation.text');
			},
			playing(e){
				let currentId = e.currentTarget.dataset.id
				// uni.createVideoContext获取视频上下文对象
				this.videoContent = uni.createVideoContext(currentId)
				console.log(currentId)
				// 获取json对象并遍历, 停止非当前视频
				let trailer = this.dynamic.videos;
				for (let i = 0; i < trailer.length; i++) {
				  let temp = trailer[i].id
				  if (i !== currentId) {
					uni.createVideoContext(temp).pause()
				  }
				}
			},
			onLike(index,postId){
				let that = this;
				if (!this.checkLogin()) {
					return
				}
				if (this.reqFlag) {
					this.$refs.uToast.show({
						message: that.operationText,
						type: 'error',
					})
					return
				}
				this.reqFlag = true;
				postLike({id:postId}).then(res => {
					if(res.code === 0 ){
						this.dynamicList[index].likes = this.dynamicList[index].likes + 1;
						this.dynamicList[index].hasLike = true;
					}
					this.reqFlag = false;
				}).catch(res => {
					this.reqFlag = false;
				})
			},
			onShowComment(id){
				this.showComment = true;
				this.$emit("popup", true);
				this.postId = id;
				this.getComment();
			},
			// 登录校验
			checkLogin() {
				let that = this;
				if (jwt.getLogin()) {
					return true;
				} else {
					uni.showModal({
						title: that.hintText,
						content: that.loginfirstText,
						confirmText: that.gotologinText,
						success: function(res) {
							if (res.confirm) {
								uni.redirectTo({
									url: '/pages/common/public/login_one'
								});
							}
						}
					});
					return false;
				}
			},
			// 输入框聚焦
			focusOn() {
				this.checkLogin();
			},
			// 获取评论
			getComment() {
				let that = this;
				commentList({oId:this.postId,categoryId:2}).then(res => {
					if (res.code === 0) {
						this.commentData = {
							"readNumer": res.data.readNumer,
							"commentSize": res.data.commentList ? res.data.commentList.length :0,
							"comment": res.data.commentList ? this.getTree(res.data.commentList) : [] 
						};
					} else {
						uni.hideLoading();
						this.$refs.uToast.show({
							message: that.comenterrorText,
							type: 'error',
						})
					}
				});
			},
			close(){
				this.showComment = false;
				this.$emit("popup", false);
			},
			// 新增评论
			add(req) {
				let that = this;
				if (!this.checkLogin()) {
					return
				}
				if (this.reqFlag) {
					this.$refs.uToast.show({
						message: that.operationText,
						type: 'error',
					})
					return
				}
				this.reqFlag = true;
				let params = {
					oId: this.postId,
					parentId: req.pId,
					categoryId:2,
					content: req.content
				}
				createComment(params).then(res => {
					this.$refs.uToast.show({
						message: that.successfuloperationText,
						type: 'success',
					})
					this.$refs.datingComment.addComplete();
					this.getComment();
					this.$emit("refreshData");
					this.reqFlag = false;
				}).catch(res => {
					this.reqFlag = false;
				})
			},
			// 点赞评论
			like(commentId) {
				let that = this;
				if (!this.checkLogin()) {
					return
				}
				if (this.reqFlag) {
					this.$refs.uToast.show({
						message: that.operationText,
						type: 'error',
					})
					return
				}
				this.reqFlag = true;
				likeComment({id:commentId}).then(res => {
					this.$refs.datingComment.likeComplete(commentId);
					this.reqFlag = false;
				}).catch(res => {
					this.reqFlag = false;
				})
			},
			// 删除评论
			del(commentId) {
				let that = this;
				if (!this.checkLogin()) {
					return
				}
				if (this.reqFlag) {
					this.$refs.uToast.show({
						message: that.operationText,
						type: 'error',
					})
					return
				}
				debugger
				this.reqFlag = true;
				deleteComment({id:commentId}).then(res => {
					this.reqFlag = false;
					this.$refs.datingComment.deleteComplete(commentId);
					this.$emit("refreshData");
				}).catch(res => {
					this.reqFlag = false;
				})
			},
			// 列表按照父子转换成树
			getTree(data) {
				let result = [];
				let map = {};
				data.forEach(item => {
					map[item.id] = item;
				});
				data.forEach(item => {
					let parent = map[item.parentId];
					if (parent) {
						(parent.children || (parent.children = [])).push(item);
					} else {
						result.push(item);
					}
				});
				return result;
			},
			onShowReport(postId){
				this.postId=postId;
				this.showReport = true;
			}
		}
	}
</script>

<style lang="scss">
.dating-dynamic-container{
	padding: 20rpx;
	//height: 500rpx;
	.dating-dynamic-wrap{
		background-color: $dating-color-auxiliary-one;
		padding: 20rpx;
		margin-bottom: 20rpx;
		.dating-dynamic-head{
			display: flex;
			.dating-dynamic-head-box{
				flex: 3;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 0 0 0 20rpx;
				.dating-dynamic-head-box-top{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.dating-dynamic-head-box-top-left{
						display: flex;
					}
					.dating-dynamic-head-box-top-right{
						
					}
				}
				.dating-dynamic-head-box-bottom{
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}
			}
		}
		.dating-dynamic-body{
			margin-top: 20rpx;
		}
		.dating-dynamic-date{
			font-size: 8rpx;
			margin-top: 10rpx;
		}
		.dating-dynamic-footer{
			display: flex;
			flex-direction: column;
			.dating-dynamic-footer-top{
				display: flex;
				flex-direction: column;
			}
			.dating-dynamic-footer-bottom{
				display: flex;
				.dating-dynamic-footer-bottom-wrap{
					display: flex;
					flex: 3;
					justify-content: flex-end;
					.dating-dynamic-footer-bottom-action{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.dating-dynamic-footer-bottom-action-num{
							margin: 0 10rpx;
						}
					}
				}
			}
		}
	}
}
</style>